<template>
  <div class="box_1">
    <bigscreen-header :headerName="'巴林右旗' + `${townName}`+ '牧业统计'" />

    <div class="w_full h_full-70 flex_row_between">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="flex_1 p_5">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">养殖类</span></div>
            <bing-tu :value="data1" />
          </div>
        </div>

        <div class="flex_1 p_5">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">防疫统计</span></div>
            <kong-xin-bing-tu :value="data2" />
          </div>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p">
          <div class="w_full h_80_p">
            <da-ban-map v-if="townName == '大板镇'" />
            <su-bo-ri-ga v-if="townName == '索博日嘎镇'" />
            <xing-fu-zhi-lu v-if="townName == '幸福之路苏木'" />
            <ba-yan-hu-shuo-hamlet v-if="townName == '巴彦琥硕镇'" />
            <cha-gan-mu-lun-hamlet v-if="townName == '查干沐沦苏木'" />
            <mei-dian-hua v-if="townName == '大板煤电化基地'" />

            <ba-yan-ta-la v-if="townName == '巴彦塔拉苏木'" />
            <cha-gan-nuo-er v-if="townName == '查干诺尔镇'" />
            <bao-ri-wu-su v-if="townName == '宝日勿苏镇'" />
            <xi-la-mu-lun v-if="townName == '西拉沐沦苏木'" />
          </div>
          
          <div class="w_full h_20_p">
            <div class="full scroll_box overflow_y_auto color_fff">
              全镇总土地面积 1925 平方公里，
              全镇大小畜存栏 22.6 万头只，其中大畜牛 3.58 万头。
              永久性棚圈建设 5.3 万平方米，青贮窖建设 8300 立方米。
            </div>
          </div>
        </div>

        <div class="w_full h_49_p">
          <div class="full border_radius_10 chart_box_bgi">
            <div class="chart_title l_30 lh_30 text_center"><span>繁殖统计</span></div>

            <div class="w_full h_full-40">
              <zhu-zhuang-tu :value="data3" :isShowUnit="false" />
            </div>
          </div>
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="full border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>嘎查村列表</span></div>

          <div class="w_full h_full-30 scroll_box overflow_y_auto p_10">
            <div class="text_center color_fff fs_18 font_number" v-for="(item, index) in villageList" :key="index">
              <div class="w_full text_center cursor" @click="goToVillagePage(item)">{{ item.name }}</div> 
            </div>
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import BaLinYouQiMap from '../maps/baLinYouQiMap.vue'
  import BingTu from '../charts/bing-tu.vue'
  import BanBingTu from '../charts/ban-bing-tu.vue';
  import KongXinBingTu from '../charts/kong-xin-bing-tu.vue';
  import ZhuZhuangTu from '../charts/zhu-zhuang-tu.vue';
  
  import { getVillageList, getRecordsYiStatisticByAreaCode } from '@/config/api';

  import DaBanMap from '../maps/daBanMap.vue'
  import SuBoRiGa from '../maps/suBoRiGa.vue'
  import XingFuZhiLu from '../maps/xingFuZhiLu.vue'
  import BaYanHuShuoHamlet from '../maps/ba-yan-hu-shuo-hamlet.vue'
  import ChaGanMuLunHamlet from '../maps/cha-gan-mu-lun-hamlet.vue'
  import MeiDianHua from '../maps/mei-dian-hua.vue'
  import BaYanTaLa from '../maps/ba-yan-ta-la.vue'
  import BaoRiWuSu from '../maps/bao-ri-wu-su.vue'
  import XiLaMuLun from '../maps/xi-la-mu-lun.vue'
  import ChaGanNuoEr from '../maps/cha-gan-nuo-er.vue'



  export default {
    name: 'townAnimal',
    components: { 
      BigscreenHeader,
      BaLinYouQiMap, 
      BingTu, 
      BanBingTu,
      KongXinBingTu,
      ZhuZhuangTu,
      DaBanMap, 
      SuBoRiGa, 
      XingFuZhiLu, 
      BaYanHuShuoHamlet,
      ChaGanMuLunHamlet,
      MeiDianHua,
      BaYanTaLa,
      BaoRiWuSu,
      XiLaMuLun,
      ChaGanNuoEr, 
      
    },
    data() {
      return {
        activeIndex: 0,
        townName: '巴林右旗大板镇',

        villageList: [],

        data1: {},
        data2: {},
        data3: {},

        muHuList: [],
      }
    },
    mounted() {
      let townId = this.$route.params.townId
      let townName = this.$route.params.townName

      this.townId = townId
      this.townName = townName

      // 获取 xxx 镇的 所有嘎查
      this.getVillageList(townId);

      // 获取 xxx 镇的 防疫记录
      this.getRecordsYiStatisticByAreaCode(townId, 3, 8)
      
      setTimeout(() => {
        this.initChart()
      }, 100)
    },
    methods: {
      // 初始化图表
      initChart() {
        this.data1 = {
          title: '',
          unit: '头、只、匹',
          data: [
            {"name": "牛", "value": 66100, "unit": ''},
            {"name": "绵羊", "value": 175434, "unit": ''},
            {"name": "山羊", "value": 9696, "unit": ''},
            {"name": "猪", "value": 1642, "unit": ''},
            {"name": "马", "value": 4231, "unit": ''},
            {"name": "驴", "value": 225, "unit": ''},
            {"name": "骆驼", "value": 186, "unit": ''},
            {"name": "骡子", "value": 4, "unit": ''},
          ]
        }

        this.data2 = {
          title: '',
          unit: '头、只、匹',
          data: [
            {"name": "牛", "value": 56213, "unit": ''},
            {"name": "绵羊", "value": 147292, "unit": ''},
            {"name": "山羊", "value": 7629, "unit": ''},
            {"name": "猪", "value": 1242, "unit": ''},
            {"name": "马", "value": 2923, "unit": ''},
            {"name": "驴", "value": 187, "unit": ''},
            {"name": "骆驼", "value": 152, "unit": ''},
            {"name": "骡子", "value": 2, "unit": ''},
          ]
        }

        this.data3 = {
          title: '',
          yName: '头、只',
          unit: '头、只、匹',
          x: ['牛', '羊', '猪', '犬', '马', '驴', '骆驼'],
          y: [345, 635, 31, 134, 24, 12, 16]
        }
      },

      // 获取 乡镇下的 所有 嘎查（村）
      async getVillageList(townId) {
        let res = await getVillageList(townId);
        try {
          if (res.code == 1000) {
            this.villageList = res.data;
          }
        }
        catch (err) {
          console.log(err)
        }
      },

      // 获取 动物的 存栏、防疫统计
      async getRecordsYiStatisticByAreaCode(areaCode, level, jobId) {
        let res = await getRecordsYiStatisticByAreaCode(areaCode, level, jobId)
        try {
          if (res.code == 1000) {
            let chart_data = []
            let data = {}
            if(res.data && res.data.length) {
              res.data.map(item => {
                data = { name: item.animalName, value: item.fangYiCount, unit: ' ' }
                chart_data.push(data)
              })

              this.data2 = {
                unit: '头、只、匹',
                isShowUnit: true,
                data: chart_data
              }
            } else {
              this.data2.data = {
                unit: '头、只、匹',
                isShowUnit: true,
                data: []
              }
            }

            this.data2 = {...this.data2}
          }
        } catch (err) {
          console.log(err)
        }
      },

      // 获取牧户列表
      async getMuHuList() {
        let params = { village: this.$route.params.val }
        let res = await getMuHuList(params)
        
        this.muHuList = res.data.results.sort((a, b) => {
          return b.cattle_num - a.cattle_num
        })
      },

      // 跳转到牧户详情页
      goToMuHuDetail(id) {
        let muHuId = id

        this.$router.push({
          path: "/bigscreen/muHuPage" + muHuId
        })
      },

      // 跳转到嘎查详情页
      goToVillagePage(item) {
        this.$router.push({
          path: `/bigscreen/villageAnimalPage/${item.id}/${item.name}`
        })
      },

      // 跳转到示范点牧户大屏
      goToShiFanDian(val) {
        this.$router.push({
          path: "/demo-makido" + val
        })
      },

      // 跳转页面
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },

      clickTab(val) {
        this.activeIndex = val
        if (val == 0) {
          this.list = this.list1
        } else if (val == 1) {
          this.list = this.list2
        } else if (val == 2) {
          this.list = this.list3
        } else if (val == 3) {
          this.list = this.list4
        } else if (val == 4) {
          this.list = this.list5
        } else if (val == 5) {
          this.list = this.list6
        }
      },

      // 跳转到 人口统计 图表详情
      goToPersonStateDetail() {
        let title = `巴林右旗${this.townName}人口统计`

        this.$router.push({
          path: "/bigscreen/personState" + title
        })
      },

      // 跳转到 机械化统计 图表详情
      goToMashineStateDetail() {
        let title = `${this.townName}机械化统计`

        this.$router.push({
          path: "/bigscreen/mashineState" + title
        })
      },

      
    }
  }
</script>

<style scoped lang="less">
  @import url('../../../../assets/css/bigscreen.less');
  .activeColor { color: #2366fc !important; }
</style>